<template>
  <view class="">
    <view class="container" v-if="!visibleCamera">
      <view class="house-owner-info-wrap">
        <u-form :model="form" ref="form" label-width="120" :error-type="errorType">
          <u-form-item label="负责人类型" borderBottom :required="true"
            @click="hadleShowPicker('is_house_owner', 'trusteeship')">
            <u--input v-model="form.trusteeship_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>

          <u-form-item label="与房主关系" borderBottom :required="true" v-if="form.trusteeship == 1"
            @click="hadleShowPicker('homeowner_relationship', 'userType')">
            <u--input v-model="form.userType_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="国籍" borderBottom required @click="hadleShowPicker('nationality', 'nationality')">
            <u--input v-model="form.nationality_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="证件类型" borderBottom required @click="hadleShowPicker('certificate_type', 'idType')">
            <u--input v-model="form.idType_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>

          <u-form-item label="证件号码" borderBottom :required="true">
            <u--input v-model="form.idCard" :type="form.idType == 10 ? 'idcard' : 'text'" :maxlength="18"
              placeholder="请填写" border="none" @blur="handleIdCardChange"></u--input>
            <view v-show="form.idType == 10" slot="right">
              <u-icon size="21" name="scan" color="#2488F5" @click="handleCamera"></u-icon>
            </view>
          </u-form-item>
          <u-form-item label="姓名" borderBottom :required="true">
            <u--input v-model="form.userName" :maxlength="10" placeholder="请填写" border="none"></u--input>
          </u-form-item>
          <u-form-item label="联系电话" borderBottom :required="true">
            <u--input v-model="form.phone" type="number" :maxlength="11" placeholder="请填写" border="none"></u--input>
          </u-form-item>
          <u-form-item label="民族" borderBottom :required="true" @click="hadleShowPicker('nation', 'nation')">
            <u--input v-model="form.nation_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <!-- <u-form-item label="户籍地址" borderBottom :required="true">
            <u--input v-model="form.residenceAddress" placeholder="请选择" border="none"></u--input>
          </u-form-item>
          <u-form-item label="户籍所属省市区" borderBottom :required="true" @click="handleCityPicker('hjssxqbm')">
            <u--input v-model="form.hjssxqbm_text" disabled disabledColor="#ffffff" placeholder="请选择"
              border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view class="hint" style="font-size: 20rpx; color: #f56c6c;" v-if="areaList.length">
            户籍所属区县由系统自动匹配，如匹配不准确或未匹配到请务必手动修改!
          </view> -->
        </u-form>
      </view>

      <view class="button-wrapper">
        <view class="cancel btn-item" @click="navBack">取消</view>
        <view class="submit btn-item" @click="submitHandle">提交</view>
      </view>

      <u-picker closeOnClickOverlay v-if="pickerShow" :show="pickerShow" :columns="pickerData" keyName="text"
        @confirm="onPickerConfirm" @cancel="pickerShow = false" @close="pickerShow = false"
        :defaultIndex="defaultIndex"></u-picker>

      <!-- <yy-city-picker :visible="cityPickerVisible" @confirm="onCityConfirm"
        @cancel="cityPickerVisible = false"></yy-city-picker> -->

      <yy-city-picker-all v-if="cityPickerVisible" :visible="cityPickerVisible" @confirm="onCityConfirm"
        @cancel="cityPickerVisible = false" :default-value="defaultCityCode"></yy-city-picker-all>
    </view>
    <yy-photo-mask :visible.sync="visibleCamera" :baseImgUrl="baseImgUrl" :clientId="clientId"
      :clientSecret="clientSecret" @parsedSuccess="onParsedSuccess">
    </yy-photo-mask>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import cityPicker from "./cityPicker.vue";
  import {
    Toast,
    navBack,
    handleClickRouter,
    checkIDCard,
    uniTrim,
    setDefaultProvinceCode
  } from "@/utils/util.js";
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    ajaxGetDictItems,
  } from "@/api/api.js";
  import pickerMixin from "../utils/picker-mixin";
  import cityPickerMixin from "../utils/city-picker-mixin";
  import _ from '@/utils/lodash.js'

  export default {
    mixins: [pickerMixin, cityPickerMixin],
    data() {
      return {
        clientId: this.$clientId,
        baseImgUrl: this.$baseImgUrl,
        clientSecret: this.$clientSecret,
        visibleCamera: false,
        form: {
          idCard: '',
          nation_text: '',
          nation: '',
          // residenceAddress: '', // 户籍地址
          // hjssxqbm: '', // 户籍编码
          // hjssxqbm_text: '',
          nationality: 'CHN',
          nationality_text: '中国',
          idType: '10',
          idType_text: '身份证',
        },
        errorType: ["none"],
        pickerShow: false,
        columns: [],
        keyName: "title",
        form_type: "",
        dictMapping: {
          is_house_owner: [{
              text: "托管人",
              value: "1",
            },
            {
              text: "房主本人",
              value: "0",
            },
          ]
        },
        city_picker_visible: false,
        options: {},

        areaList: [],
        defaultCityCode: '',
      };
    },
    watch: {},
    onLoad(options) {
      this.options = options
      this.form.houseid = options.houseid;
    },
    onShow() {},
    methods: {
      handleIdCardChange() {
        let params = {
          idCard: this.form.idCard,
          fDzbm: this.options.buildingId
        }
        if (this.form.idType == 10) {
          setDefaultProvinceCode.call(this, params, ({
            code,
            address
          }) => {
            this.defaultCityCode = code
          })
        }
      },
      navBack,
      get_dict_type(list, type) {
        let res = list.find((item) => item.value == type);
        if (res && res.title) {
          return res.title;
        } else {
          return "暂无";
        }
      },
      pickerClose(e) {
        this.pickerShow = false;
      },

      showConfirm(e) {
        let obj = e.value[0];
        this.$set(this.form, this.form_type + "_dict", obj.title);
        this.$set(this.form, this.form_type, obj.value);
        this.pickerShow = false;
      },

      city_picker_cancel() {
        this.city_picker_visible = false;
      },

      city_picker_confirm(e) {
        // this.$set(this.form, "hjssxqbm_text", e.address);
        // this.$set(this.form, "hjssxqbm", e.code);
        this.city_picker_visible = false;
      },

      checkForm(fieldValue, errorMessage) {
        if (!fieldValue) {
          Toast(errorMessage);
          return false;
        }
        return true;
      },

      checkFormArray(fieldsArray) {
        const isValid = fieldsArray.every((item) =>
          this.checkForm(item.value, item.errorMessage)
        );

        if (!isValid) return false;

        return true;
      },

      async submitHandle() {
        if (!this.form.trusteeship) {
          Toast('请选择负责人类型！')
          return
        }
        if (this.form.trusteeship == '1' && !this.form.userType) {
          Toast('请选择与房主关系！')
          return
        }
        if (!this.form.nationality) {
          Toast('请选择国籍！')
          return
        }
        if (!this.form.idType) {
          Toast('请选择证件类型！')
          return
        }
        if (!this.form.idCard) {
          Toast('请填写证件号码！')
          return
        }
        let idCardFlag = checkIDCard(this.form.idCard);
        if (!idCardFlag && this.form.idType == 10) {
          Toast("请输入正确的证件号码");
          return;
        }
        if (!this.form.userName) {
          Toast('请填写姓名！')
          return
        }
        if (!this.form.phone) {
          Toast('请填写联系电话！')
          return
        }
        if (!this.$u.test.mobile(this.form.phone)) {
          Toast("请输入正确的联系电话");
          return;
        }
        if (!this.form.nation) {
          Toast('请选择民族！')
          return
        }
        // if (!this.form.residenceAddress || !uniTrim(this.form.residenceAddress)) {
        //   Toast('请填写户籍地址！')
        //   return
        // }
        // if (!this.form.hjssxqbm) {
        //   Toast('请选择户籍所属区县！')
        //   return
        // }

        this.form.isMain = 0;
        await postAction(`/indeed/house/addPoliceHouseMain`, this.form);
        Toast("提交成功");
        navBack();
      },
      handleCamera() {
        this.visibleCamera = true;
      },
      onParsedSuccess({
        userName,
        idcard,
        domicileAddress,
        nation
      }) {
        this.form.idCard = idcard
        this.form.userName = userName
        // this.form.residenceAddress = domicileAddress
        this.handleIdCardChange()
        // 民族，默认选中 
        let nationText = `${nation}族`
        let nationOption = this.dictMapping['nation'].find(item => item.text === nationText)
        if (nationOption) {
          this.form.nation_text = nationOption.text
          this.form.nation = nationOption.value
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  @import '../styles/submit-button.scss';

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;

    padding: 22rpx 16rpx;

    .house-owner-info-wrap {
      flex: 1;
      background: #fff;
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      padding: 20rpx 36rpx 20rpx 40rpx;
    }
  }
</style>